// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
// 引入组件
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";
import Message from "../pages/Message.vue";
import News from "../pages/News.vue";
import Detail from '../pages/Detail.vue'

// 创建一个路由器（简写）
const router =  new VueRouter({
  routes: [
    {
      name:'guanyu',
      path: "/about",
      component: About,
      meta: {isAuth:true,title:'关于'}
    },
    {
      name:'zhuye',
      path: "/home",
      component: Home,
      meta: {title:'主页'},
      children: [ //通过children配置子级路由
        {
          name:'xinwen',
          path: "news", //此处一定不要写：/news
          component: News,
          meta:{isAuth:true,title:'新闻'},
          // 独享路由守卫
          /* beforeEnter:(to,from,next) =>{
            console.log('独享路由守卫',to,from);

            if (to.meta.isAuth) { // 使用配置的自定义属性判断权限（判断是否需要鉴权）
              if (localStorage.getItem('school')==='atguigu') {  //权限控制的具体规则
                next() // 放行
              } else {
                alert('学校名不对,无权限查看！')
              }
            } else {
              next() // 放行
            }
          } */
        },
        {
          name:'xiaoxi',
          path: "message", //此处一定不要写：/message
          component: Message,
          meta:{isAuth:true,title:'消息'},
          children:[
            {
              name:'xiangqing',
              path:'detail',
              component:Detail,
              meta:{isAuth:true,title:'详情'},

              // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
              // props:{a:1,b:'你好'}

              // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
              // props:true

              // props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
              props($route){
                return {
                  id:$route.query.id,
                  title:$route.query.title
                }
              }

              // 第三种写法优化写法（连续解构赋值）
              // 第一次解构({query})
              // 第二次解构({query:{id,title}})
              /* props({query:{id,title}}){
                return {
                  id,
                  title
                }
              } */

            }
          ]
        },
      ],
    },
  ],
});

// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
/* router.beforeEach((to,from,next)=>{
  console.log('前置路由守卫',to,from);

  // if (to.name === 'xinwen' || to.name === 'xiaoxi') { // 使用路由组件的名字判断权限
  // if (to.path === '/home/news' || to.path === '/home/message') { // 使用路由组件的跳转路径判断权限
  if (to.meta.isAuth) { // 使用配置的自定义属性判断权限（判断是否需要鉴权）
    if (localStorage.getItem('school')==='atguigu') {  //权限控制的具体规则
      next() // 放行
    } else {
      alert('学校名不对,无权限查看！')
    }
  } else {
    next() // 放行
  }
}) */

// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后调用
router.afterEach((to,from)=>{
  console.log('后置路由守卫',to,from);
  document.title = to.meta.title || '硅谷系统' //修改网页的title
})

// 暴露一个路由器（默认暴露）
export default router 
